import React, { useContext, useMemo } from 'react'
import Mynav from './components/Mynav'
import Ctx from '../store/Ctx'
import { useHistory, useLocation } from 'react-router-dom/cjs/react-router-dom.min';
import { Arrow, Like, Star } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space } from 'react-vant'


export default function Details() {

  //获取数据
  let obj = useContext(Ctx)

  let location = useLocation()

  //获取id
  let id = location.state
  //console.log(id);

  //通过计算属性 找到对应的详情页
  let itemobj = useMemo(() => {
    return obj.datalist.find(item => {
      return item.id == id
    })
  }, [obj.datalist])


  return (
    <div>
      {/* 导航栏 */}
      <Mynav title={'详情页'} leftText={true}></Mynav>

      {/* 卡片组件 */}
      <div>
        <Card round style={{ marginBottom: 20 }}>
          <Card.Cover>
            <Image src={itemobj.img} height={'60vh'} />
          </Card.Cover>
          <Card.Header>
            {itemobj.title}
          </Card.Header>
          <Card.Body>
            {itemobj.ms}
          </Card.Body>
          <Card.Footer>
            <Space>
              {/* 收藏图标 */}
              <span style={{ position: 'relative', top: '8px' }}
                onClick={() => {
                  //切换收藏状态的方法
                  obj.dispatch({
                    type: 'change_collect',
                    payload: itemobj.id
                  })
                }}>
                <Star color={itemobj.collect ? 'red' : ''} />
              </span>
              <Button
                round
                type={itemobj.sub ? 'warning' : 'default'}
                size='small'
                onClick={() => {
                  //切换订阅的方法
                  obj.dispatch({
                    type: 'change_sub',
                    payload: itemobj.id
                  })
                }}
              >
                {itemobj.sub ? '已经订阅' : '免费订阅'}
              </Button>
            </Space>
          </Card.Footer>
        </Card>
      </div>
    </div>
  )
}
